<template>
	<div class="myinput">
		<input :placeholder="placeholder" :class="[cla, cla1]"
			   :value="value" :type="typeUser" @input="changeValue" @blur="changeRes">
		<span class="bt" v-if="type === 'text' && !flag">必填</span>
		<i v-if="icon" :class="'iconfont ' + icon"></i>
		<i v-if="type === 'password' && typeUser === 'password'" @click="showPass('text')"
		   class="iconfont iconxianshi"></i>
		<i v-if="type === 'password' && typeUser === 'text'" @click="showPass('password')"
		   class="iconfont iconyincang"></i>
	</div>
</template>

<script>
export default {
	name: 'myinput',
	props: {
		value: {},
		type: {
			default: 'text'
		},
		placeholder: {},
		icon: {},
		cla1: '',
	},
	data() {
		return {
			typeUser: this.type,
			flag: true,
			cla: ''
		};
	},
	watch: {},
	computed: {},
	created() {

	},
	mounted() {

	},
	methods: {
		changeValue(e) {
			this.$emit('input', e.target.value)
		},
		showPass(val) {
			this.typeUser = val;
		},
		changeRes() {
			this.flag = this.value;
			if (this.type === 'text') {
				let res = /^1([3-9])\d{9}$/;
				this.flag = res.test(this.value);
			} else {
				let res = /^(\w|@){6,18}$/;
				this.flag = res.test(this.value);
			}
			this.flag ? this.cla = 'res1' : this.cla = 'res';
		},
	}
};
</script>

<style lang="scss" scoped>
.myinput {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;

  input {
    outline: 0;
    border: 0;
    width: 15rem;
    margin: 0.5rem 0;
    height: 3rem;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 0 1rem;
    background-color: #F5F5F5;
  }

  .bt {
    position: absolute;
    right: 2.4rem;
    font-size: 0.9rem;
    color: #E12C1E;
  }

  i {
    font-size: 1rem;
  }

  .res {
    border: 1px solid #E12C1E !important;
    background-color: #FFE9E4 !important;
  }

  .res1 {
    border: 1px solid #38DB24 !important;
    background-color: #E1FFDF !important;
  }

  .cla1 {
    padding-right: 7rem;
  }
}

</style>